html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  // background-color:#ccc;
}

.drop{
  /*width:200px;
  height:60px;
  margin:30px auto 0 auto;*/
  background-color:#fff;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  
  @trackHeight:5px;
  @slideSize:1.3em;
  .track{
    margin-left:@slideSize/2;
    width:calc(100% - @slideSize/2);
    height:@trackHeight;
    border-radius:@trackHeight/2;
    box-shadow:0 0 5px  #01AAED;
    position:relative;
   
    .slide{
      position:absolute;
      z-index:10;
      top:@trackHeight/2;
      left:0;
      margin:-@slideSize/2 0 0 -@slideSize/2;
      width:@slideSize;
      height:@slideSize;
      border-radius:@slideSize/2;
      box-shadow:0 0 5px #FF5722;
      background-color:#fff;
      display:block;
      cursor:pointer;
    }
  }


}

@media screen and (max-width:1024px){
  .drop{
    width:80%;
    height:60px;
    margin:30px auto 0 auto;

    @trackHeight:10px;
    @slideSize:2em;
    .track{
      margin-left:@slideSize/2;
      width:calc(100% - @slideSize/2);
      height:@trackHeight;
      border-radius:@trackHeight/2;
      box-shadow:0 0 5px  #01AAED;
      position:relative;
     
      .slide{
        position:absolute;
        z-index:10;
        top:@trackHeight/2;
        left:0;
        margin:-@slideSize/2 0 0 -@slideSize/2;
        width:@slideSize;
        height:@slideSize;
        border-radius:@slideSize/2;
        box-shadow:0 0 5px #FF5722;
        background-color:#fff;
        display:block;
        cursor:pointer;
      }
    }
  }
}

@media screen and (min-width:1025px){
  
  .drop{
    width:200px;
    height:60px;
    margin:30px auto 0 auto;
  }
}